<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.common.dev.js"></script>
</head>
<body>
    <div id="root">
        <swiper />
        <swiper />
    </div>

    <template id="swiper">
        <div>
            <button @click="go(currentIndex-1)">&lt;</button>
            <button @click="go(currentIndex+1)">&gt;</button>
            <img v-for="(item,index) in (imgList||[])" :src="item" :class="{img: true, show: index===currentIndex }">
        </div>
    </template>
    <script>
        const Swiper = Vue.component('swiper', {
            template: '#swiper',
            // 属性-即用来接受入参的。
            props: {
                imgList: {
                    type: Array,
                    default: ()=>([
                        'https://img0.baidu.com/it/u=1429651842,2045410088&fm=26&fmt=auto',
                        'https://img2.baidu.com/it/u=1704007411,3954041731&fm=26&fmt=auto',
                    ]),
                    validator:(list) => {
                        return list.every(src=>typeof src === 'string')
                    }
                    
                }
            },
            data: function(){
                return {
                    currentIndex: 0
                }
            },
            methods: {
                go: function(nextIndex){
                    if(nextIndex === -1){
                        nextIndex = this.imgList.length-1;
                    }
                    if(nextIndex === this.imgList.length){
                        nextIndex = 0;
                    }
                    this.currentIndex = nextIndex;
                }
            }

        });
        new Vue({
            el: '#root'
        })
        // const swiper = new Swiper();
        // console.log('swiper', swiper)
    </script>
</body>
</html>